@model Sio.Cms.Lib.ViewModels.SioArticles.ReadMvcViewModel
<!-- End Navbar -->
<div class="page-header page-header-mini">
    
    <div class="page-header-image" data-parallax="true" style="background-image: url('/Content/Uploads/03-2019/135175162569258313659896755692414304622385o92541a8af5c046dab2c2a7c4d4790cfe.jpg');">
    </div>
</div>
<div class="section">
    <div class="container">
        <div class="row post-details">
            
            <div class="col-md-5">
                <div class="carousel slide" data-ride="carousel" data-interval="8000">
                    @if(Model.MediaNavs.Count>0)
                    {
                        <ol class="carousel-indicators">
                            @if(Model.MediaNavs.Count>1)
                            {
                                @for (int i = 0; i < Model.MediaNavs.Count; i++)
                                {
                                    <li data-target="#productCarousel" data-slide-to="@i" class="@(i==0?"active":"")"></li>
                                }
                            }
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            @for (int i = 0; i < Model.MediaNavs.Count; i++)
                            {
                                <div class="carousel-item @(i==0?"active":"")">
                                    <img class="d-block img-raised" src="@Model.MediaNavs[i].Image" alt="@Model.MediaNavs[i].Description">
                                </div>
    
                            }
                        </div>
                        @if(Model.MediaNavs.Count>1)
                        {
                        <a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev">
                            <button type="button" class="btn btn-primary btn-icon btn-round btn-sm" name="button">
                                <i class="now-ui-icons arrows-1_minimal-left"></i>
                            </button>
                        </a>
                        <a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next">
                            <button type="button" class="btn btn-primary btn-icon btn-round btn-sm" name="button">
                                <i class="now-ui-icons arrows-1_minimal-right"></i>
                            </button>
                        </a>
                        }
                    }
                    else if(Model.ImageUrl != ""){
                        <img class="d-block img-raised" src="@Model.ImageUrl" alt="@Model.Title">
                    }
                </div>
                
            </div>
            
            <div class="col-md-6 ml-auto mr-auto">                
                <h2 class="title"> @Model.Title </h2>
                @*<h5 class="category">@Model.Title</h5>*@
                <div id="accordion" role="tablist" aria-multiselectable="true" class="card-collapse">
                    <div class="card card-plain mb-0">
                        <div class="card-header" role="tab" id="headingOne">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Description
                                <i class="now-ui-icons arrows-1_minimal-down"></i>
                            </a>
                        </div>
                        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                            <div class="card-body">
                                <p>
                                <fb-send class="hide-on-mb" app-id="'@(SioService.GetConfig<string>("FacebookAppId", ViewBag.culture as string))'"></fb-send>
                                <fb-share></fb-share>                                
                                </p>
								<p><fb-like href="'@Model.DetailsUrl'"></fb-like></p>
                                @Html.Raw(Model.Excerpt)
                            </div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
        <div class="section pb-0">
            <div class="section-story-overview pt-0">
                <div class="row">
                    <div class="col-md-12">
                        @Html.Raw(Model.Content)
                    </div>
                </div>
                @foreach (var nav in Model.ModuleNavs.OrderBy(n => n.Priority))
                {
                    var module = nav.Module; 
                    if (module != null)
                    {
                        <partial name="@module.TemplatePath" model="@module" />
                    }
                }
                <partial name="../Widgets/_Comments_Facebook.cshtml"/>
        
            </div>
        </div>
        
        
    </div>
</div>
